{% extends 'surveillanceapp/base.html' %}
{% load static %}

<!-- extra css block starts here -->
{% block extracss %}

    <style>
        .station-clickable:hover{
            background: #dddddd;
        }

        .station-clickable{
            cursor: pointer;
        }

        .station-heading{
            background: #546d7d;
            color: #ffffff;
        }
        .btn{
            padding-top: 2% !important;
            padding-bottom: 2% !important;
        }
        .btn-text{
            font-size: 150%;
            font-weight: bold;
        }

    </style>

{% endblock %}
<!-- extra css block ends here -->

<!-- main content block starts here -->

{%  block main-content %}
    <div class="row">
        <div class="col-lg-10">
            <ol class="breadcrumb">
              <li><i class="fa fa-home"></i><a href="{% url 'surveillanceapp:index' %}">Home</a></li>
              <li><i class="fas fa-map-marked-alt"></i>Stations</li>
            </ol>
        </div>
        <div class="col-lg-2">
            <a id="add-station" href="{% url 'surveillanceapp:stationcreate' %}" class="btn btn-block btn-primary">
                <span class="fas fa-plus-circle fa-2x" style="margin-right: 6%"> </span>
                <span class="btn-text">Add New Station</span>
            </a>
        </div>
    </div>

    <!-- end of add button -->
    <div class="row">
        {% for data in station_list %}
            <div class="col-lg-6">
                <div class="panel panel-default">
                    <div class="panel-heading station-heading">
                        <h2><i class="fas fa-map-marker-alt"></i>    Station {{ data.station.station_id }}</h2>
                    </div>
                    <div class="panel-body station-clickable" data-href="{% url 'surveillanceapp:stationdetails' data.station.pk %}">
                        <div class="col-lg-6">
                            <img src="{% static data.station.station_pic.url %}" style="width: 100%;" class="center-block">
                        </div>
                        <div class="col-lg-6">
                            <ul class="list-group">
                                <li class="list-group-item" >
                                    Station Name:
                                    <p class="lead"><strong>{{ data.station.station_name }}</strong></p>
                                </li>
                                <li class="list-group-item" >
                                    Total Surveillance Videos:
                                    <p class="lead"><strong>{{ data.station.surveillance_videos.count }}</strong></p>
                                </li>
                                <li class="list-group-item" >
                                    Videos Processed: {{ data.progress.analysed }}/{{ data.progress.total }}
                                    <div class="progress thin" style="margin: 2%; background: #394a59;">
                                        <div class="progress-bar" role="progressbar" style="width: {{ data.progress.percent }}%; background: #d8ab5a;">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}

    </div>

{% endblock %}
<!-- main content block ends here -->

<!-- extra script block starts here -->
{% block extrajs %}
    <script>
        //making table row clickable
        stations = document.querySelectorAll('.station-clickable');
        stations.forEach(function (station) {
            station.addEventListener('click',function () {
                window.location.href = this.getAttribute('data-href');
            })
        })
    </script>
{% endblock %}

<!-- extra script block ends here -->
